The most common way for customers to add products to their shopping cart is one at a time, but sometimes it’s easier to present people with a list of products and allow them to add multiple items at once.

Maybe you’re selling a group of products that are common for people to purchase a mixture of, or it could be various parts that are commonly purchased together – but whatever the reason is you can create a Multi Add To Cart form with ShopSite and provide this feature to your customers.

Step 1: The Templates

To create a multi add to cart page you will need both a custom page template and a custom product template.  Normally a page template loops through the products and creates either small sections of form code or individual add to cart links for each product.  With a multi add to cart page there is one block of form code which has small sections inside of it to pass each product.  It may sound complicated, but ShopSite has full details and sample code here:

http://www.shopsite.com/templates/cookbook/tips-multiaddtocart-page.shtml

Start by creating a page and product template using their code.  Be sure to follow the tip in the “Advanced” section of the article, where you set the page template to pass in the name of your product template.  Example:  [– PRODUCT DefautlCustomProductTemplate –]

Once the templates are all set, create a page on your site, assign some products to it, and set that page to use your new template.  Test it out and it should now be showing all the assigned products and allow you to add multiple products to the cart at once.

• TIP: If the Quantity input box is not appearing for a product, enable the “Display Order Quantity” option on the product’s Edit Product Layout screen.  This will save a step for the customer and will be needed in the next part below.

Step 2: No Checkboxes

Now that you have the form working, see those checkboxes you enable to add a product to the cart?  We’re now going to make a change so the customer doesn’t have to use those.  We have the full details in this article here:

http://support.lexiconn.com/news/viewtopic.php?t=380

..but here’s a summary for you:

Edit the custom *product* template you created in Step 1 and replace it’s code with this code: (which is from the bottom box in the article above)

[-- DEFINE PRODUCT --]
<p>
<input id="[-- PRODUCT.RECORDNUMBER --]_check" type=checkbox name=itemnum value="[-- PRODUCT.RECORDNUMBER --]" style="visibility: hidden;">
[--PRODUCT.Name--]<br>
[--PRODUCT.Price--]<br>
[-- IF product.DisplayOrderQuantity? --]
Quantity <input id="[-- PRODUCT.RECORDNUMBER --]_quantity" type=text size="2" name="[-- PRODUCT.RECORDNUMBER --]:qnty" value="0" onchange="var checkVal = document.getElementById('[-- PRODUCT.RECORDNUMBER --]_check'); (this.value > 0 && checkVal.checked==false ) ? checkVal.checked=true : checkVal.checked=false;">
<br>
[-- END_IF --]
[-- Product.ProductDescription --]<br>
[-- IF PRODUCT.DisplayOrderingOptions --]
[-- PRODUCT.OptionText --]
[-- ORDER_OPTION_MENU LINE --]
[-- END_IF --]
</p>
[-- END_DEFINE PRODUCT --]

That’s all there is to it – just replace the prior custom product template with the code above.  That change hides the checkboxes and it will automatically enable the hidden checkbox for any product which has a quantity field larger than zero.

Be sure to test again – is everything working correctly?  Make sure it’s working before making the final change below.

Step 3:  Pretty Error Messages

You may have noticed that you will receive an error message about a missing “itemnum” field if you submit the form with all the quantity fields set to zero.  You didn’t?  Go ahead and try that on your form now.  That error’s pretty ugly – but with a little more javascript we can clean that up and present a pop-up window to the customer with any message we want to show.

This article details the steps for that last change:

http://support.lexiconn.com/news/viewtopic.php?t=380

Once you make that change, the customer will see a message such as “Please select at least one item to add to the cart.” on the screen if they try to submit the form without entering a quantity.

Working Sample

Using the code from the 3 steps above, with a couple of modifications for it to fit the look of our demo store, here is a working sample of a multi add to cart page:

http://shopsite-demo.lexiconn.com/multi-add.html

But I Use Order Anywhere?

If you use Order Anywhere you can still create a multi add to cart page.  To do so, you would first  complete steps 1 and 2 above in order to create a working ShopSite page with the products that you want to use.

Once you have the ShopSite page generated you can the view its source code and copy everything from the opening “<form…” tag through the closing “</form>” tag and put that on your order anywhere page.

Test your order anywhere page to make sure everything works, then complete Step 3 to put in the extra javascript changes.  We recommend adding that after since it requires putting code in the <head> section of your code.

…

A multi add to cart page may not be best for all sites or products, but if your customers normally buy multiple items together you may want to give it a try.